<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head th:replace="common/layout :: common_header(~{::title},~{::link})">
<title>树选择控件</title>
<link th:href="@{/ace/plugins/jstree/themes/default/style.min.css}" rel="stylesheet" type="text/css"/>

</head>
<body>

<div class="row">
					<div id="jstree" ></div>
			</div>




<div th:replace="common/commonJS"></div>
<script th:src="@{/ace/plugins/jstree/jstree.min.js}" type="text/javascript"></script>
 
 <script type="text/javascript">
 /*<![CDATA[*/
	var treeUrl = "[[${url}]]";
	 /*]]>*/
		var tree;
		$(document).ready(function(){
			
			//jstree初始化
			$('#jstree').jstree({
				'core' : {
					"multiple" : true,
					"animation" : 0,
					"themes" : { "icons":true ,"stripes":false},
					'data' : {
						"url" : ctx+treeUrl,
						"dataType" : "json" // needed only if you do not supply JSON headers
					}
				},
				'plugins' : ['types' ,"search",  'wholerow'],
				"types":{ 
					'default' : { 'icon' : 'fa fa-file-text-o' }, 
			        '1' : {'icon' : 'fa fa-home'},
					'2' : {'icon' : 'fa fa-umbrella' },
				    '3' : { 'icon' : 'fa fa-group'},
					'4' : { 'icon' : 'fa fa-eur' },
					'btn':{'icon' : 'fa fa-square'}
				} 

			});
			
			 tree = $('#jstree').jstree(true);
			 
			 //查找功能
			  var to = false;
			  $('#search_q').keyup(function () {
			    if(to) { clearTimeout(to); }
			    to = setTimeout(function () {
			      var v = $('#search_q').val();
			      $('#jstree').jstree(true).search(v);
			    }, 250);
			  });
			  $("#searchButton").click(function(){
				  var v = $('#search_q').val();
			      $('#jstree').jstree(true).search(v);
			  })
			
		});
		
	</script>
</body>
</html>